<template>
  <div ref="pageMainContent">
    <a-card :bordered="false" class="table-search">
      <a-form layout="inline">
        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
          <a-form-item>
            <tag-select>
              <tag-select-option value="Category1">类目一</tag-select-option>
              <tag-select-option value="Category2">类目二</tag-select-option>
              <tag-select-option value="Category3">类目三</tag-select-option>
              <tag-select-option value="Category4">类目四</tag-select-option>
              <tag-select-option value="Category5">类目五</tag-select-option>
            </tag-select>
          </a-form-item>
        </standard-form-row>

        <a-form-item label="作者">
          <a-select
            style="width: 200px"
            mode="multiple"
            placeholder="不限"
            v-model="queryParam.author"
            @change="handleChange"
          >
            <a-select-option value="lisa">王昭君</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="好评度">
          <a-select
            style="width: 200px"
            placeholder="不限"
            v-model="queryParam.rate"
          >
            <a-select-option value="good">优秀</a-select-option>
            <a-select-option value="normal">普通</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-card>

    <a-list
      :dataSource="pageData.records"
      :pagination="pagination"
      :loading="pageData.tableLoading"
      :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
      class="card-list">
      <a-list-item slot="renderItem" slot-scope="item" class="list-item">
        <template v-if="!item || item.id === undefined">
          <a-button class="new-btn" type="dashed" @click="linkTo(1, 1)">
            <a-icon type="plus" />新增卡片
          </a-button>
        </template>
        <a-card v-else :body-style="{ paddingBottom: 20 }" hoverable>
          <a-card-meta :title="item.name">
            <template slot="avatar">
              <a-avatar size="small" :src="item.avatar" class="card-avatar" />
            </template>
            <template slot="description">
              {{ item.des }}
            </template>
          </a-card-meta>
          <template slot="actions">
            <a-tooltip title="下载">
              <a-icon type="download" />
            </a-tooltip>
            <a-tooltip title="编辑">
              <a-icon type="edit" />
            </a-tooltip>
            <a-tooltip title="分享">
              <a-icon type="share-alt" />
            </a-tooltip>
            <a-dropdown>
              <a class="ant-dropdown-link">
                <a-icon type="ellipsis" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">1st menu item</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">2nd menu item</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">3rd menu item</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
          <div class=""></div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import moment from 'moment'
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.AvatarItem

export default {
  components: {
    AvatarList,
    AvatarListItem,
    Ellipsis,
    TagSelect,
    TagSelectOption,
    StandardFormRow
  },
  data () {
    return {
      queryParam: {}, // 查询参数
      pagination: { // 表格分页数据项
        total: 0,
        pageSize: 10,
        current: 1,
        onShowSizeChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        onChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        showSizeChanger: true,
        showQuickJumper: true
      },
      pageData: { // 表格数据列表
        tableLoading: false,
        records: [{}, { id: 1, name: '卡片1', des: '这是一段描述' }]
      },
      pageMeta: {
        extraImage: undefined,
        pageTitle: '搜索卡片',
        description: '这是搜索卡片列表的示例',
        tabs: [{
          key: '/card',
          title: '卡片列表'
        }, {
          key: '/search',
          title: '搜索卡片'
        }]
      }
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    }
  },
  methods: {
    handleChange (value) {
      console.log(`selected ${value}`)
    }
  }
}
</script>

<style lang="less" scoped>
.card-list {
  margin-top: 24px;

  .list-item {
    .new-btn {
      background-color: #fff;
      border-radius: 2px;
      width: 100%;
      height: 170px;
    }
    .card-avatar {
      width: 48px;
      height: 48px;
    }
    /deep/ .ant-card-body {
      height: 120px;
      cursor: default;
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      overflow: hidden;
      line-height: 22px;
    }
  }
}
</style>
